<template>
    <div class="table-container">
        <Search :searchSchema="searchSchema" @on-search="onSearch" />
        <el-table v-loading="loading" background border :data="tableData" stripe style="width: 100%">
            <template v-for="(item, index) in tableColumns" :key="index">
                <el-table-column v-if="typeof item.render == 'function'" :width="item.width" :prop="item.k"
                    :label="item.l">
                    <template #default="scope">
                        <span v-html="item.render(scope.row)"></span>
                    </template>
                </el-table-column>
                <el-table-column v-else :width="item.width" :prop="item.k" :label="item.l" />
            </template>

            <el-table-column prop="opration" label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="onDetail(scope.row)" link>详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="justify-content: flex-end;" :page-sizes="[10, 30, 50, 100]" :page-size="pageInfo.pageSize"
            @size-change="handleSizeChange" @current-change="currentChange" :current-page="pageInfo.currenPage"
            background layout="prev,sizes, pager, next" :total="pageInfo.total" />
    </div>
    <DetailDialog ref="detailRef" :formSchema="formSchema" />
</template>
<script lang="ts" setup>
import { tablePageApi } from '@/api/common'
import { ITableColumn, FormType, ISearchSchemaItem } from '#/tablepage'
import DetailDialog from '@/components/base-table/detail.vue'
import {tableColumns,searchSchema,formSchema} from './data'
const tableApi = '/api/get/userTrackList'
import Search from '@/components/base-table/search.vue'
import { ElMessageBox } from 'element-plus'
// import "element-plus/es/components/message-box/style/css";
const props = defineProps({
    formSchema:Array<ITableColumn>,
    searchSchema: Array<ISearchSchemaItem>,
})
const loading = ref(false)
const tableData = ref([])
const pageInfo = reactive({
    total: 0,
    pageSize: 10,
    currenPage: 1
})
const route = useRoute()
const refresh = (params?: FormType) => {
    const userId = route.query.userId || params?.userId
    if(!userId){
        return
    }
     loading.value = true
    const data = { ...params,userId, page: pageInfo.currenPage }
    tablePageApi(tableApi, data).then((res) => {
        loading.value = false
        console.log(res)
        console.log(res.data)
        const { data, total } = res;
        pageInfo.total = total
        tableData.value = data
    })
}
const currentChange = (val: number) => {
    pageInfo.currenPage = val
    refresh()
}
const handleSizeChange = (val: number) => {
    pageInfo.pageSize = val
    refresh()
}
onMounted(() => {
    refresh()
});
const onSearch = (params: FormType) => {
    refresh(params)
}

/**
 * 详情
 */
type DetailComponentType = InstanceType<typeof DetailDialog>;
const detailRef=ref<DetailComponentType | null>(null);
const onDetail = (row: Record<string, any>) => {
    if (detailRef.value) {
        detailRef.value.openDialog(row)
    }
}
const router = useRouter()
const userTrack = (row: Record<string, any>)=>{
    const {userId} = row
router.push({path:'/track/list',query:{userId}})
}
</script>
<style lang="scss" scoped>
.table-container {
    background-color: #fff;
    padding: 10px;
    height: 100%;
}

.el-pagination {
    margin-top: 15px;
}
</style>
